@()(implicit request: play.api.mvc.RequestHeader)
	@main("Gene homology annotation (GeneWise)") {

		<div class="row">
			<div class="form-group col-sm-12">
				<h2 class="page-heading"
				style="text-align: left;
					border-bottom: 5px solid #e9f3f4">Gene homology annotation (GeneWise)</h2>
			</div>
		</div>

		<form class="registration-form form-horizontal" id="form" accept-charset="UTF-8">

			<div class="form-group" style="display: none">
				<label class="control-label col-sm-2">Protein offer way:</label>
				<div class="col-sm-3">
					<select name="method" class="form-control" onchange="change(this)">
						<option value="db">from database</option>
						<option value="hand" selected>paste by hand</option>
					</select>
				</div>
			</div>

			<div class="form-group" id="hand">
				<label class="control-label col-sm-2">Protein sequence:</label>
				<div class="col-sm-8">
					<textarea name="proteinSeq" id="proteinSeq" class="form-control monospace" rows="5"></textarea>
					<span class="help-block">e.g.,&nbsp;<a href="#"><em id="egProtein">
						example</em></a></span>
				</div>
			</div>

			<div class="form-group" id="db" style="display: none">
				<label class="control-label col-sm-2">Gene Id:</label>
				<div class="col-sm-3">
					<input class="form-control" name="geneId" id="geneId">
				</div>
			</div>

			<div class="form-group">
				<label class="control-label col-sm-2">DNA sequence:</label>
				<div class="col-sm-8">
					<textarea name="dnaSeq" id="dnaSeq" class="form-control monospace" rows="5"></textarea>
					<span class="help-block">e.g.,&nbsp;<a href="#"><em id="egDna">
						example</em></a></span>
				</div>
			</div>

			<div class="form-group">
				<label class="control-label col-sm-2">Show Parameters:</label>
				<div class="col-sm-2">
					<select id="para" name="para" class="form-control">
						<option selected="selected" value="true">
							ON</option> <option value="false">OFF</option> </select>
				</div>

				<label class="control-label col-sm-2">Pretty ASCII:</label>
				<div class="col-sm-2">
					<select id="pretty" name="pretty" class="form-control">
						<option selected="selected" value="true">ON</option>
						<option value="false">OFF</option> </select>
				</div>

				<label class="control-label col-sm-2">Gene Structure:</label>
				<div class="col-sm-2">
					<select id="genes" name="genes" class="form-control">
						<option selected="selected" value="true">ON</option>
						<option value="false">OFF</option>
					</select>
				</div>

			</div>

			<div class="form-group">
				<label class="control-label col-sm-2">Protein Translation:</label>
				<div class="col-sm-2">
					<select id="trans" name="trans" class="form-control">
						<option selected="selected" value="true">ON</option> <option value="false">OFF</option> </select>
				</div>

				<label class="control-label col-sm-2">cDNA:</label>
				<div class="col-sm-2">
					<select id="cdna" name="cdna" class="form-control">
						<option selected="selected" value="true">ON</option> <option value="false">OFF</option> </select>
				</div>

				<label class="control-label col-sm-2">EMBL Feature Table:</label>
				<div class="col-sm-2">
					<select id="embl" name="embl" class="form-control">
						<option selected="selected" value="true">ON</option> <option value="false">OFF</option> </select>
				</div>
			</div>

			<div id="otherArgs" style="display: none;">

				<div class="form-group">
					<label class="control-label col-sm-2">Ace File Gene Structure:</label>
					<div class="col-sm-2">
						<select id="ace" name="ace" class="form-control">
							<option selected="selected" value="true">ON</option> <option value="false">OFF</option> </select>
					</div>

					<label class="control-label col-sm-2">GFF Output:</label>
					<div class="col-sm-2">
						<select id="gff" name="gff" class="form-control">
							<option selected="selected" value="true">ON</option> <option value="false">OFF</option> </select>
					</div>

					<label class="control-label col-sm-2">EMBL Feature For diana:</label>
					<div class="col-sm-2">
						<select id="diana" name="diana" class="form-control">
							<option selected="selected" value="true">ON</option> <option value="false">OFF</option> </select>
					</div>
				</div>

				<div class="form-group">
					<label class="control-label col-sm-2">Local/Global Mode:</label>
					<div class="col-sm-2">
						<select id="init" name="init" class="form-control">
							<option selected="selected" value="local">Local</option> <option value="global">
							Global</option> </select>
					</div>

					<label class="control-label col-sm-2">Splice Site:</label>
					<div class="col-sm-2">
						<select id="splice" name="splice" class="form-control">
							<option value="model">Modelled</option> <option selected="selected" value="flat">
							GT/AG only</option> </select>
					</div>

					<label class="control-label col-sm-2">Random (Null) Model:</label>
					<div class="col-sm-2">
						<select id="random" name="random" class="form-control">
							<option selected="selected" value="syn">Synchronous model</option> <option value="flat">
							Flat model</option> </select>
					</div>
				</div>

				<div class="form-group">
					<label class="control-label col-sm-2">Algorithm:</label>
					<div class="col-sm-2">
						<select id="alg" name="alg" class="form-control">
							<option selected="selected" value="623">GeneWise 623</option> <option value="2193">
							GeneWise 2193</option> </select>
					</div>
				</div>

			</div>

			<div class="form-group" id="more">
				<div class="actions col-sm-offset-2 col-sm-2">
					<button type="button" class="btn btn-primary" onclick="more()">
						More options...</button>
				</div>
			</div>


			<div class="form-group">
				<div class="actions col-sm-offset-2 col-sm-2">
					<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="mySearch()">
						Run</button>
				</div>
			</div>


		</form>
		<hr>
		<div id="result" style="display: none;">
			<h4>Result:
				&nbsp;<button class="btn btn-primary" onclick="downloadOut()"><i class="fa fa-download"></i>&nbsp;Download</button>
			</h4>
			<pre id="out" style="background-color: white"></pre>
		</div>

		<script>

				function downloadOut() {
					var fileName = "out.txt"
					var content = $("#out").text()
					var blob = new Blob([content], {
						type: "text/plain;charset=utf-8"
					})
					saveAs(blob, fileName)
				}

				var geneIds = []
				$(function () {

					function extractor(query) {
						var result = /([^,]+)$/.exec(query);
						if (result && result[1])
							return result[1].trim();
						return '';
					}

					bootstrapValidator()

					$('#egProtein').click(function () {
						var eg = ">AK058311 \"AK058311\",1615,\"\",\"\",92,1438,\"001-013-H11\"\n" +
								"MGQGTPGGMGKQGGAPGDRKPGGDGDKKDRKFEPPAAPSRVGRKQRKQKGPEAAARLPNV\n" +
								"VMKVEKAPLESYADIGGLDAQIQEIKEAVELPLTHPELYEDIGIRPPKGVILYGEPGTGK\n" +
								"KVTHADFKKAKEKVMFKKKEGVPEGLYM "
						$('#proteinSeq').val(eg);
						$("#form").bootstrapValidator("revalidateField", "proteinSeq")
						return false
					});

					$('#egDna').click(function () {
						var eg = ">AK058311_Chr03_11499998_11507414\n" +
								"AATATCACCAGTGTCTTATAAGCAATTACACCAATTTTATTGGGGGTGTTCCTCAATAGT\n" +
								"TCGACGATCATGATGTCATGTCACCGAGGAATGAAAACGGAGCAGATAATTCTCTAATAG\n" +
								"TGAGACATACTCCAATTCTTTATAACTCTACCACCTTCAATATACCTTTTAGATTTTATA\n" +
								"AAGCCCAAGATACTTGAAAAGAACAGAAAAACAGAAG"
						$('#dnaSeq').val(eg);
						$("#form").bootstrapValidator("revalidateField", "dnaSeq")
						return false
					});

				})


				function change(element) {
					var value = $(element).find(">option:selected").val()
					if (value == "db") {
						$("#db").show()
						$("#hand").hide()
					} else {
						$("#db").hide()
						$("#hand").show()
					}
				}

				function more() {
					$("#otherArgs").show()
					$("#more").hide()
				}

				function mySearch() {
					var value = $("#geneId").val()
					var form = $("#form")
					var fv = form.data("bootstrapValidator")
					if ($.inArray(value, geneIds) == -1) {
						fv.updateStatus("geneId", 'INVALID', 'blank');
					}
					fv.validate()
					if (fv.isValid()) {
						var element = "<div id='content'><span id='info'>Running...</span>&nbsp;<img class='runningImage' src='@routes.Assets.at("images/running2.gif")' style='width: 30px;height: 20px;'></div>"
						var index = layer.alert(element, {
							skin: 'layui-layer-molv'
							, closeBtn: 0,
							title: "Info",
							btn: []
						});
						$.ajax({
							url: "@routes.ToolsController.geneWise()",
							type: "post",
							data: $("#form").serialize(),
							success: function (data) {
								layer.close(index)
								if (data.valid == "false") {
									swal("Error", data.message, "error")
									$("#result").hide()
								} else {
									$("#out").html(data)
									$("#result").show()

								}
							}
						});
					}
				}

				function bootstrapValidator() {
					$('#form').bootstrapValidator({
								framework: 'bootstrap',
								icon: {
									valid: 'glyphicon glyphicon-ok',
									invalid: 'glyphicon glyphicon-remove',
									validating: 'glyphicon glyphicon-refresh'
								},
								fields: {
									proteinSeq: {
										validators: {
											notEmpty: {
												message: 'Protein sequence is required！'
											},
											regexp: {
												regexp: /^>.*\n[a-zA-Z\n]+\s*$/,
												message: "Protein sequence is invalid！"
											}
										}
									},
									dnaSeq: {
										validators: {
											notEmpty: {
												message: 'DNA sequence is required！'
											},
											regexp: {
												regexp: /^>.*\n[ATCGNatcgn\n]+\s*$/,
												message: "DNA sequence is invalid！"
											}
										}
									},
									geneId: {
										validators: {
											notEmpty: {
												message: 'Gene Id is required！'
											},
											blank: {
												message: "Gene Id is invalid!",
											}
										}
									},
								}
							}
					);
				}

		</script>
	}
